<!--  -->
<template>
	<div class="body">
		<div class="container" ref="container">
			<h1>login</h1>
			<form action="">
				<input type="text" v-model.trim="loginData.userName" class="tbx" placeholder="账户" />
				<input type="password" v-model.trim="loginData.password" class="tbx" placeholder="密码" />
				<input type="button" class="sub" value="登陆" @click="handleLogin" />
			</form>
		</div>
	</div>
</template>
<script lang="ts">
	import { reactive } from "vue";
	import { useRouter } from "vue-router";
	import { useStore } from "vuex";
	export default {
		name: "Login",
		setup() {
			const store = useStore();
			const router = useRouter();
			const loginData = reactive({
				userName: "moxin",
				password: "123456",
				code: "aa123",
			});
			const handleLogin = () => {
				store.commit("SET_TOKEN", "token");
				router.replace({
					path: "/",
				});
			};
			return { loginData, handleLogin };
		},
	};
</script>
<style lang="scss" scoped>
	.body {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #2c3e50;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 350px;
		height: 450px;
		border-radius: 20px;
		background-color: #34495e;
		box-shadow: 15px 15px 10px rgba(33, 45, 58, 0.3);
		overflow: hidden;
		position: relative;

		form {
			display: flex;
			width: 300px;
			height: 230px;
			justify-content: space-around;
			flex-direction: column;
			align-items: center;
			z-index: 1;
		}

		form .tbx {
			width: 250px;
			height: 40px;
			outline: none;
			border: none;
			color: #fff;
			border-bottom: 1px solid #fff;
			background: none;
		}
		form .tbx::placeholder {
			color: #fff;
			font-size: 15px;
		}

		form .sub {
			width: 250px;
			height: 40px;
			line-height: 30px;
			outline: none;
			border: 1px solid #fff;
			border-radius: 20px;
			letter-spacing: 5px;
			color: #fff;
			background: none;
			cursor: pointer;
			margin-top: 10px;
		}

		h1 {
			z-index: 1;
			color: #ecf0f1;
			letter-spacing: 5px;
			padding-left: 5px;
			font-size: 50px;
			font-weight: 100;
			font-family: PangMenZhengDao;
			text-shadow: 5px 5px 5px rgba(33, 45, 58, 0.3);
		}
	}
</style>
